<template>
  <!-- 初始化一个div框架盒子 -->
  <div class="app">

  </div>
  <div>
    <div id="firstContainer" class="container"></div>
    <div id="secondContainer" class="container"></div>
  </div>
  <div>
    <button @click="sayHello"> hello </button>
    <Person></Person>
  </div>

</template>

<script lang="ts" setup name="App">

import { createChart } from 'lightweight-charts';
import { ref, onMounted } from 'vue'
import axios from 'axios'
import Person from './components/Person.vue';


console.log('created');
console.log('getid', document.getElementById("firstContainer"))


onMounted(() => {

  console.log('omounted', document.getElementById("firstContainer"))
  const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };

  let firstContainer = ref(createChart(document.getElementById("firstContainer"), chartOptions))
  let areaSeries = ref(firstContainer.value.addAreaSeries({
    lineColor: '#2962FF', topColor: '#2962FF',
    bottomColor: 'rgba(41, 98, 255, 0.28)',
  }));
  areaSeries.value.setData([
    { time: '2018-12-22', value: 32.51 },
    { time: '2018-12-23', value: 31.11 },
    { time: '2018-12-24', value: 27.02 },
    { time: '2018-12-25', value: 27.32 },
    { time: '2018-12-26', value: 25.17 },
    { time: '2018-12-27', value: 28.89 },
    { time: '2018-12-28', value: 25.46 },
    { time: '2018-12-29', value: 23.92 },
    { time: '2018-12-30', value: 22.68 },
    { time: '2018-12-31', value: 22.67 },
  ]);

  // 使用setTimeout延迟1秒后更新随机数据
  setTimeout(() => {
    const randomValue = Math.random() * 10 + 20; // 生成20-30之间的随机数
    areaSeries.value.update({ time: '2019-01-01', value: randomValue });

    setTimeout(() => {
      const randomValue = Math.random() * 10 + 20; // 生成20-30之间的随机数
      areaSeries.value.update({ time: '2019-01-02', value: randomValue });

      setTimeout(() => {
        const randomValue = Math.random() * 10 + 20; // 生成20-30之间的随机数
        areaSeries.value.update({ time: '2019-01-03', value: randomValue });
      }, 1000)

    }, 1000)

  }, 1000);



  // 蜡烛图
  // const candleChartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } }
  // const candleChart = createChart(document.getElementById("secondContainer"), candleChartOptions)
  // const candleSeries = candleChart.addCandlestickSeries(
  //   {
  //     upColor: '#26a69a', 
  //     downColor: '#ef5350', 
  //     borderVisible: false, 
  //     wickUpColor: '#26a69a', 
  //     wickDownColor: '#ef5350'
  //   })
  //   const data = ref([{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }]);
  //   candleSeries.setData(data.value);

  //   candleChart.timeScale().fitContent();



})


function sayHello() {
  axios.get('/trading/hello').then(res => {
    console.log(res);
  })
}



</script>

<style>
/**
  .app{
    background-color: aliceblue;
    box-shadow: 0 0  10px;
    border-radius: 10px;
    padding: 20px;
  }
    **/

.container {
  width: 600px;
  height: 300px;
  float: left;
  margin-right: 60px;
}
</style>